<template>
	<view class="notice-frame" @click="iKnow">
		<view class="title">{{title}}</view>
		<view class="bottom">
			<image class="icon" src="/static/LOGO.png" mode=""></image>
			<view class="desc">{{body}}</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				body: ''
			}
		},
		
		onLoad() {
			window.electronAPI.noticeMessage((title, body) => {
				this.title = title
				this.body = body
			})
		},
		
		onUnload() {
			window.electronAPI.removeNoticeMessage()
		},
		
		methods: {
			iKnow() {
				window.electronAPI.iKnow()
			}
		}
	}
</script>

<style scoped>
	
	.notice-frame {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: white;
	}
	
	.notice-frame:hover {
		cursor: pointer;
		background-color: #ececec;
	}
	
	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 12px 15px 5px 15px;
		
	}
	
	.bottom {
		display: flex;
		margin: 0 15px 5px 15px;
		align-items: flex-start;
		animation: mZorea 1s linear infinite;
	}
	
	@keyframes mZorea {
		0%, 100% { transform: translateX(0); }
		10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
		20%, 40%, 60%, 80% { transform: translateX(2px); }
	}
	
	.icon {
		width: 45px;
		height: 45px;
	}
	
	.desc {
		font-size: 12px;
		margin-left: 10px;
		/* margin-right: 10px; */
		flex: 1;
	}

</style>
